<script setup></script>
<template>
  <div class="layout">
    <div class="page-container">
      <div class="h-[500px] bg-[#999]"></div>
      <div class="bg-[#eee] grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-[20px] py-[40px]">
        <div
          v-for="item in 5"
          :key="item"
          class="bg-[#666] relative p-[30px] flex flex-col justify-center items-center"
        >
          <div class="bg-[#ccc] w-[200px] h-[200px]"></div>
          <div class="pt-[10px]">{{ item }}</div>
        </div>
      </div>
    </div>
    <div class="w-[100%] h-[400px] bg-[#eee]"></div>
    <div class="page-container">
      <div class="flex h-[500px]">
        <div class="w-[200px] bg-[#666]"></div>
        <div class="flex-1"></div>
      </div>
    </div>
  </div>
</template>
